<div style = "padding:18px;text-align:center;">
    <div class = "layui-row" style = "text-align:left;">
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <span>支持jpg、png格式，支持多张图片，最大文件2M以内</span>
    </div>
    <div id = "preview" style = "width:100%;height:250px;">
        {volist name="files" id="vo"}
        <div class = "layui-col-xs4" style = "position:relative;padding:12px;">
            <div style = "position:absolute;width:24px;height: 24px;border-radius: 24px;line-height:24px;background: red;color:white;right:-5px;top:-5px;" class = "close">X</div>
            <img src="{$vo}" style="width:100%;"/>
        </div>
        {/volist}
    </div>
    <input type="hidden" id = "upload_path" value="{$filepath}"/>
</div>
<script>
    var file_arr = {if condition="empty($filepath)"}[]{else/}"{$filepath}".split(";"){/if};
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '{:url("file/upload")}' //上传接口
            ,done: function(res){
                if(res.code == 0 || res.code == '0'){
                    file_arr.push(res.msg);
                    $("#preview").append('<div class = "layui-col-xs4" style = "position:relative;padding:12px;">\n' +
                        '            <div style = "position:absolute;width:24px;height: 24px;border-radius: 24px;line-height:24px;background: red;color:white;right:-5px;top:-5px;" class = "close">X</div>\n' +
                        '            <img src="'+res.msg+'" style="width:100%;"/>\n' +
                        '        </div>');
                    $("#upload_path").val(file_arr.join(";"));
                }else{
                    llayer.alert(res.msg, {
                        icon: 5,
                        title: '提示',
                    });
                }

            }
            ,error: function(){
                //请求异常回调
            }
        });
    });
    $(document).on("click",".close",function(){
       var img = $(this).next();
       file_arr.remove(img.attr("src"));
       $(this).parent().remove();
       $("#upload_path").val(file_arr.join(";"));
    });
</script>
